<template>
  <div>
    <div class="manageUserHeader">
      <label>
        商品状态:&nbsp;&nbsp;
        <select v-model="searchData.status" @change="getGoods">
          <option selected :value="-1">全部</option>
          <option :value="1">正常</option>
          <option :value="3">下架</option>
<!--          <option>正常</option>-->
        </select>
      </label>
      <label>
        商品id:&nbsp;&nbsp;
        <input @keyup.enter="getGoods" v-model="searchData.id" type="text" placeholder="请输入商品id">
      </label>
      <label>
        商家id:&nbsp;&nbsp;
        <input @keyup.enter="getGoods" v-model="searchData.storeId" type="text" placeholder="请输入店铺id">
      </label>
      <label>
        商品名称:&nbsp;&nbsp;
        <input @keyup.enter="getGoods" v-model="searchData.name" type="text" placeholder="请输入商品名称">
      </label>
      <label>
        描述&nbsp;&nbsp;
        <input @keyup.enter="getGoods" v-model="searchData.description" type="text" placeholder="请输入描述">
      </label>
    </div>

    <div class="manageUserBody">
      <table>
        <thead>
        <tr>
          <td>商品id</td>
          <td>商品名字</td>
          <td>商品图片</td>
          <td>价格</td>
          <td>商品描述</td>
          <td>操作</td>
        </tr>
        </thead>
        <tbody v-if="goodsListData.length">
        <tr v-for="(item,index) in goodsListData">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>
            <img :src="item.url" alt="图片未加载">
          </td>
          <td>
            <span style="color: red;font-weight: bold">￥{{item.price}}元</span>
          </td>
          <td>{{item.description}}</td>
          <td>
            <span v-if="item.status>1" @click="upGoods(index)" class="greenText">上架</span>
            <span v-if="item.status<=1" @click="downGoods(index)" class="redText">下架</span>
          </td>
        </tr>
        </tbody>
        <template v-else>
          <el-empty description="无数据" />
        </template>
      </table>
    </div>

    <nav style="margin-top: 40px" aria-label="Page navigation example">
      <ul class="pagination justify-content-center">
        <li class="page-item" :class="{disabled:pageData.current===1}" @click="choosePages(1)">
          <a class="page-link">首页</a>
        </li>
        <li v-for="(item,index) in pageData.pages>3?3:pageData.pages" @click="choosePages(index+1)" class="page-item"><a class="page-link" href="#">{{index+1}}</a></li>
        <li class="page-item" :class="{disabled:pageData.current===pageData.pages}" @click="choosePages(pageData.pages)">
          <a class="page-link" href="#">末尾</a>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import {getUsersAPI} from "@/apis/user";
import {ElMessage} from "element-plus";
import {getGoodsAPI,changeStatusAPI} from "@/apis/dish.js"

const goodsListData=ref([])

const searchData=ref({
  id:'',
  description:'',
  name:'',
  storeId:'',
  status:-1,
  current:1
})

const pageData=ref({})

const getGoods=async ()=>{
  const res=await getGoodsAPI(searchData.value);

  if(res.data.code===1)
  {
    goodsListData.value=res.data.data.records
    pageData.value=res.data.data
  }
  else
  {
    ElMessage.error(res.data.msg)
  }
}

const choosePages=(current)=>{
  searchData.value.current=current;
  getGoods()

  // 移除所有带有 "active" 类的元素的 "active" 类
  document.querySelectorAll(".page-item").forEach((item) => {
    item.removeAttribute("aria-current");
    item.classList.remove("active");
  });

  // 为当前页面的元素添加 "active" 类，并设置 aria-current 属性
  const activePageItem = document.querySelector(`.page-item:nth-child(${searchData.value.current+1})`);
  if (activePageItem) {
    activePageItem.classList.add("active");
    activePageItem.setAttribute("aria-current", "page");
  }
}

const upGoods=async (index)=>{
  let data=goodsListData.value[index]
  data.status=1

  const res=await changeStatusAPI(data);

  if(res.data.code===1)
  {
    ElMessage.success("操作成功")
    getGoods()
  }
  else
  {
    ElMessage.error(res.data.msg)
  }
}

const downGoods=async (index)=>{
  let data=goodsListData.value[index]
  data.status=3

  const res=await changeStatusAPI(data);

  if(res.data.code===1)
  {
    ElMessage.success("操作成功")
    getGoods()
  }
  else
  {
    ElMessage.error(res.data.msg)
  }
}

onMounted(()=>{
  getGoods()
})
</script>

<style scoped>
.manageUserHeader
{
  height: 80px;
  width: 100%;
  /*background-color: #02b7fb;*/
  line-height: 80px;
}
.manageUserHeader label
{
  margin-left: 50px;
}
.manageUserHeader input
{
  box-sizing: border-box;
  padding-left: 8px;
  width: 200px;
  height: 40px;
  border: 1px solid #02b7fb;
}

table
{
  margin-left: 30px;
}
td
{
  flex:1;
  text-align: center;
  display: flex; /* 使用 flex 布局 */
  flex-wrap: wrap;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
thead tr td
{
  font-weight: bold;
  font-size: 18px;
}
tr
{
  display: flex;
  padding-top: 10px;
  width: 1400px;
  text-align: center;
  justify-content: space-evenly;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
}
tbody
{
  min-height: 500px;
  margin-top: 10px;
}

td img
{
  width: 70px;
  height: 70px;
  border-radius: 50%;
}

.grayText,
.greenText,
.redText
{
  /*font-weight: bold;*/
  font-style: italic;
  /*font-weight: bold;*/
  /*cursor: grab;*/
  font-size: 16px;
  margin: 0 15px;
}
.greenText
{
  color: green;
}
.redText
{
  color: red;
}
.grayText
{
  color: gray;
}

label select
{
  width: 100px;
  height: 40px;
  border: 1px solid #02b7fb;
}
</style>